@generic_font: 			"Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
@font_size:    			.85em;
@main_bkgnd:   			#EFEFEF url(Images/bg.png) repeat center top;
@select_button_bkgnd: 	#5C9C19 url(Images/alphabutton.png) left top repeat-x;
@footer_bkgnd:   	    #EFEFEF url(Images/footerbg.png) repeat center top;
@link_hover_color:      #203340;


body
{
    font-size: @font_size;
    font-family: @generic_font;   
    overflow: hidden 
}


header, nav, section
{
    display: block;
}

#3DArea
{
    min-height : 100%;
    max-height : 100%;
    margin:0;
}



#main
{
    background: @main_bkgnd;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

#footer
{
     clear:both;
     color:#FFF;
     background: @footer_bkgnd;
     bottom:0;
	 left:0px;
     border:solid 1px #333;
     height:31px;
     width:100%;
     min-width:950px;
     position:fixed;
     z-index:100;
	 text-align: center;    
     font-size: 20px;
	 display: inline;
}

.sharebuttons {
	display:inline-block;	
    filter: gray; 
    -webkit-filter: grayscale(1); 
	margin: 5px 1px 1px 1px;	
}

.sharebuttons:hover{
  -webkit-filter: grayscale(0); 
}


.generic_button
{  
    -webkit-border-radius: 4px;   
}



#selectfile_button, .generic_button
{
	font-weight: bold;
	text-transform: uppercase;
	background: #5C9C19 url(http://localhost:54986/Content/Images/alphabutton.png) left top repeat-x;
	border: 1px solid #203340;
	padding: 30px 40px;
	text-align: center;
	font-size: 30px;
	position: relative;
	left: 5px;
	top: -50px;
}


a{
    text-decoration: none;
    vertical-align: baseline;
    font-size: 100%;
    margin: 0;
    padding: 0;
    color: white     
}

a:hover
{ 
    color:@link_hover_color;
}

#progress
{        
    width:100px;
    height:100px;
    margin: auto;    
}

.drop_zone
{
	border: 2px dashed #BBB;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 5px;
	text-align: center;
	font: 40pt bold, "Verdana";
	color: #BBB;
	margin: 5em 150px 150px 150px;
	position: relative;
	left: -2%;
	top: -10%;
	right: 1%;
	min-width: 10em;
	
}

 .progress-bar {
            background-color: #1a1a1a;
            height: 25px;
            padding: 5px;
            width: 350px;
            margin: 70px 0 20px 0;			
            -moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
            -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
			-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
			box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;       
			position: relative;
			left: 35%;    
        }
        
        .progress-bar span {
            display: inline-block;
            height: 100%;
			background-color: #777;
            -moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
			box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
			-webkit-transition: width .4s ease-in-out;
			-moz-transition: width .4s ease-in-out;
			-ms-transition: width .4s ease-in-out;
			-o-transition: width .4s ease-in-out;
			transition: width .4s ease-in-out;		
			top: -30px;
			position: relative;
        }
		

		
    .blue span {
        background-color: #34c2e3;   
    }

      

		
	.stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;			
		background-image: -webkit-gradient(linear, left top, right bottom,
							color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
							color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
							color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
							to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);            
            
        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;       		
	}
        
    @-webkit-keyframes animate-stripes { 
		0% {background-position: 0 0;} 100% {background-position: 60px 0;}
    }
        
        
    @-moz-keyframes animate-stripes {
		0% {background-position: 0 0;} 100% {background-position: 60px 0;}
    }

